<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/public/head::head(~{::title},~{::script},~{})">
    <title>管理员列表-答题吧后台管理系统</title>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">管理员管理</a>
        <a>
          <cite>管理员列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">&#xe666;</i></a>
</div>
<div class="weadmin-body" id="app" v-cloak>
    <div class="layui-row">
        <form class="layui-form layui-col-md12 we-search">
            <div class="layui-input-inline">
                <select name="loginState">
                    <option value="">全部状态</option>
                    <option value="true">启用</option>
                    <option value="false">禁用</option>
                </select>
            </div>
            <div class="layui-inline">
                <input type="text" name="param" placeholder="昵称、姓名、邮箱或电话" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" lay-submit lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <div class="weadmin-block">
        <button class="layui-btn" onclick="WeAdminShow('添加管理员','/admin/admin/addPage')"><i class="layui-icon"></i>添加
        </button>
        <span class="fr" style="line-height:40px">共有数据：{{total}} 条</span>
    </div>
    <table class="layui-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>昵称</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>手机</th>
            <th>加入时间</th>
            <th>状态</th>
            <th>操作</th>
        </thead>
        <tbody>
        <tr v-for="item in adminList">
            <td>{{item.id}}</td>
            <td>{{item.adminNick}}</td>
            <td>{{item.adminName}}</td>
            <td>{{item.email}}</td>
            <td>{{item.phone}}</td>
            <td>{{item.createTime}}</td>
            <td class="td-status">
                <span class="layui-btn layui-btn-normal layui-btn-xs" :class="item.loginState?'':'layui-btn-disabled'">
                    {{item.loginState?'已启用':'已停用'}}
                </span>
                <span class="layui-btn layui-btn-xs" :class="item.adminType==0?'layui-btn-danger':'layui-btn-warm'">
                    {{item.adminType==0?'超级管理员':'普通管理员'}}
                </span>
            </td>
            <td class="td-manage">
                <a @click="changeState(item.loginState,item.id)" href="javascript:;" :title="item.loginState?'停用':'启用'"
                   v-if="item.adminType!=0">
                    <i class="layui-icon">{{item.loginState?'&#xe69c;':'&#xe6af;'}}</i>
                </a>
                <a title="编辑" @click="open('编辑','/admin/admin/editPage/'+item.id)" href="javascript:;">
                    <i class="layui-icon">&#xe642;</i>
                </a>
                <a title="删除" @click="softDel(item.id)" v-if="item.adminType!=0" href="javascript:;">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="page">
        <div id="laypage"></div>
    </div>
</div>
</body>
<script src="/static/common/plugs/vue/vue.js" type="text/javascript"></script>
<script type="text/javascript">

    function initLayui() {
        layui.extend({
            admin: '/static/admin/js/admin'
        });
        layui.use(['jquery', 'admin', 'form', 'laypage'], function () {
            var laydate = layui.laydate
                , $ = layui.jquery
                , laypage = layui.laypage
                , form = layui.form;

            //执行一个laypage实例
            laypage.render({
                elem: 'laypage' //注意，这里的 test1 是 ID，不用加 # 号
                , count: app.$data.total //数据总数，从服务端得到
                , limits: [10, 20, 40, 60, 80, 100] //每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                , jump: function (obj, first) {
                    app.$data.pageSize = obj.limit;
                    app.$data.pageNum = obj.curr;
                    //首次不执行
                    if (!first) {
                        getAdminList();
                    }
                }
            });

            /**
             * 监听搜索按钮
             */
            form.on("submit(sreach)", function (data) {
                console.log(data.field);
                app.$data.initLayui = false;
                var requestUrl = "/admin/admin/getAdminListVagueLimit/" + app.$data.pageNum + "/" + app.$data.pageSize;
                $.post(requestUrl, data.field, function (res) {
                    console.log(res);
                    if (res.success) {
                        app.$data.total = res.data.pageInfo.total;
                        app.$data.adminList = res.data.adminList;
                        app.$data.initLayui = true;
                    }
                });
                return false;
            });
        });
    }

    /*启用/停用*/
    window.changeState = function (state, id) {
        console.log(state, id);
        var title = state == true ? '停用' : '启用';
        layer.confirm('确认要' + title + '吗？', function (index) {
            $.get("/admin/admin/updateAdminById", {id: id, loginState: !state}, function (res) {
                console.log(res);
                if (res.success) {
                    layer.msg('已' + title + '！', {
                        icon: 6,
                        time: 1000
                    });
                    setTimeout(refresh, 1000);
                } else {
                    layer.msg(title + "失败", {
                        icon: 5,
                        time: 1000
                    });
                }
            });

        });
    };

    /*软删除*/
    window.softDel = function (id) {
        layer.confirm('确认要删除吗？', function (index) {
            //发异步删除数据
            $.get("/admin/admin/updateAdminById", {id: id, deleteTime: getNowTimeStr()}, function (res) {
                console.log(res);
                if (res.success) {
                    layer.msg('已删除!', {
                        icon: 1,
                        time: 1000
                    });
                    setTimeout(refresh, 1000);
                } else {
                    layer.msg(res.errMsg, {
                        icon: 2,
                        time: 1000
                    });
                }
            });
        });
    };

    /**
     * 服务器获取管理员列表
     * @param pageNum 当前页码
     * @param paeSize 页面大小
     */
    function getAdminList() {
        var requestUrl = "/admin/admin/getAdminListLimit/" + app.$data.pageNum + "/" + app.$data.pageSize;
        $.post(requestUrl, function (res) {
            console.log(res);
            if (res.success) {
                app.$data.total = res.data.pageInfo.total;
                app.$data.adminList = res.data.adminList;
                app.$data.initLayui = true;
            }
        })
    }

    var that = this;
    var app = new Vue({
        el: "#app",
        data: {
            adminList: null //管理员列表
            , total: 0 //数据总数
            , initLayui: false //是否可以初始化layui
            , pageSize: 10
            , pageNum: 1
        },
        watch: {
            'initLayui': function (newVal) {
                console.log("change initLayui value:", newVal);
                if (newVal)
                    that.initLayui();
            }
        },
        methods: {
            /**
             * 修改管理员启用/停用状态
             * @param state
             * @param id
             */
            changeState: function (state, id) {
                changeState(state, id);
            },
            /**
             * 软删除数据
             */
            softDel: function (id) {
                softDel(id);
            },
            /**
             * 打开弹窗
             * @param title
             * @param url
             */
            open: function (title, url) {
                WeAdminShow(title, url);
            }
        }
    });
    getAdminList();
</script>
</html>